<template>
  <el-card class="sku-list" shadow="always" :body-style="{ padding: '20px' }">
    <el-table border stripe :data="skuList">
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column prop="skuName" label="名称"></el-table-column>
      <el-table-column prop="skuDesc" l label="描述"></el-table-column>
      <el-table-column prop="skuDefaultImg" l label="默认图片">
        <template v-slot="{ row }">
          <el-image :src="row.skuDefaultImg"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="操作" width="250">
        <template v-slot="{ row }">
          <el-button
            v-if="row.isSale === 0"
            type="success"
            icon="ele-Top"
            size="small"
            title="上架"
            @click="cancelSaleAndOnSale(row)"
          />
          <el-button
            v-else
            type="info"
            icon="ele-Bottom"
            size="small"
            title="下架"
            @click="cancelSaleAndOnSale(row)"
          />
          <el-button
            type="warning"
            icon="ele-Edit"
            size="small"
            @click="skuEdit"
          />
          <el-button
            type="info"
            icon="ele-InfoFilled"
            size="small"
            @click="findSkuDetail(row.id)"
          />
          <el-button
            type="danger"
            icon="ele-Delete"
            size="small"
            @click="deleteSku(row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:page-size="limit"
      v-model:current-page="page"
      :total="total"
      :page-sizes="[20, 40, 80, 100]"
      layout="prev, pager, next, jumper,total, sizes"
      background
    >
    </el-pagination>

    <el-drawer
      v-model="drawer"
      @close="closeDrawer"
      :with-header="false"
      size="50%"
    >
      <el-row>
        <el-col :span="5">名称</el-col>
        <el-col :span="16">{{ skuDetail.skuName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">描述</el-col>
        <el-col :span="16">{{ skuDetail.skuDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">价格</el-col>
        <el-col :span="16">{{ skuDetail.price }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">平台属性</el-col>
        <el-col :span="16">
          <el-tag
            v-for="attr in skuDetail.skuAttrValueList"
            :key="attr.attrId"
            :type="tagColor()"
            size="small"
            :style="{ marginRight: '10px' }"
          >
            {{ attr.attrName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">销售属性</el-col>
        <el-col :span="16">
          <el-tag
            v-for="sale in skuDetail.skuSaleAttrValueList"
            :key="sale.id"
            :type="tagColor()"
            size="small"
            :style="{ marginRight: '10px' }"
          >
            {{ sale.saleAttrName }}：{{ sale.saleAttrValueName }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">商品图片</el-col>
        <el-col :span="16">
          <el-carousel height="450px" trigger="click">
            <el-carousel-item
              v-for="item in skuDetail.skuImageList"
              :key="item.id"
            >
              <el-image
                :style="{ width: '450px', height: '450px' }"
                :src="item.imgUrl"
                alt=""
              />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Sku",
});
</script>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { onMounted, ref, watch } from "vue";
import {
  requestSkuList,
  requestCancelSale,
  requestOnSale,
  requestFindBySku,
  type skuInfoListType,
  type skuInfoItemType,
  requestDeleteSku,
} from "@/api/sku";

const page = ref(1);
const limit = ref(10);
const total = ref(0);
//获取初始化动态数据
const skuList = ref<skuInfoListType>([]);

//获取sku分页列表数据的事件
const getSkuList = async () => {
  const result = await requestSkuList(page.value, limit.value);
  skuList.value = result.records;
  total.value = result.total;
};
watch([page, limit], () => {
  getSkuList();
});
//初始化请求sku分页列表的数据
onMounted(() => {
  getSkuList();
});
//上架与下架的事件函数
const cancelSaleAndOnSale = async (row: skuInfoItemType) => {
  if (row.isSale === 0) {
    try {
      await requestOnSale(row.id as number);
      ElMessage.success("上架成功");
    } catch (e) {
      ElMessage.success("上架失败");
    }
  } else {
    try {
      await requestCancelSale(row.id as number);
      ElMessage.success("下架成功");
    } catch (e) {
      ElMessage.success("下架失败");
    }
  }
  getSkuList();
};
//编辑sku
const skuEdit = () => {
  ElMessage.warning("正在开发中");
};
//删除sku
const deleteSku = async (skuId: number) => {
  try {
    await requestDeleteSku(skuId);
    ElMessage.success("删除成功");
  } catch (e) {
    ElMessage.error("删除失败");
  }
  getSkuList();
};

//抽屉的开关
const drawer = ref(false);

/**@skuDetail 初始化一个sku详情数据的常量*/
const skuDetail = ref<skuInfoItemType>({
  price: 0,
  skuName: "",
  skuDesc: "",
  weight: "",
  category3Id: null,
  skuDefaultImg: "",
  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
});

/**@findSkuDetail 查看sku详情的事件函数*/
const findSkuDetail = async (skuId: number) => {
  drawer.value = true;
  const result = await requestFindBySku(skuId);
  skuDetail.value = result;
};
/**@closeDrawer 关闭抽屉的事件函数*/
const closeDrawer = () => {
  skuDetail.value = {
    price: 0,
    skuName: "",
    skuDesc: "",
    weight: "",
    category3Id: null,
    skuDefaultImg: "",
    skuImageList: [],
    skuAttrValueList: [],
    skuSaleAttrValueList: [],
  };
};

//tag随机颜色
const tagColor = () => {
  return ["", "success", "warning", "info", "danger"][
    ~~(Math.random() * 5)
  ] as any;
};
</script>

<style lang="scss" scoped>
.sku-list {
  .el-row {
    margin: 10px 0;

    .el-col-5 {
      text-align: right;
      margin-right: 10px;
      font-size: 20px;
    }
  }
}
//深度选择器修改指示器的样式
:deep(.el-carousel__button) {
  width: 10px;
  height: 10px;
  background-color: rgb(98, 98, 98);
  border-radius: 50%;
}
</style>
